<template>
  <transition name="popup-fade">
    <div
      v-show="value"
      @touchmove.stop="touchmove"
      :style="{ animationDuration: `${duration}s`, ...overlayStyle, zIndex }"
      class="popup-bg"
			:class="overlayClass"
    ></div>
  </transition>
</template>
<script>
import  overlayProps from './overlayProps';
export default {
  name: "cj-popup-overlay",
  props: {
		...overlayProps
	},
  methods: {
    touchmove(e) {
      if (this.lockScroll) {
        e.preventDefault();
      }
    },
  },
};
</script>
<style scoped>

.popup-fade-enter-active {
	animation: nut-fade-in;
}

.popup-fade-leave-active {
	animation: nut-fade-out;
}

@keyframes nut-fade-in {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes nut-fade-out {
	from {
		opacity: 1;
	}

	to {
		opacity: 0;
	}
}


.popup-bg {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.7);
}



</style>